<template>
    <div class="demo-container">
        <div class="demo-container-left">
            <div class="demo-container-content fl-column" style="margin-bottom: 15px;height: 430px;">
                <div class="demo-container-content_title">{{ state.chartsTitle.leftPieChart }}</div>
                <div ref="leftPieChartRef" class="flexone">1</div>
            </div>

            <div class="demo-container-content fl-column" style="height: 430px;">
                <div class="demo-container-content_title"> {{ state.chartsTitle.leftBarChart }}</div>
                <div ref="leftBarChartRef" class="flexone">1</div>
            </div>
        </div>
        <div class="demo-container-right">
            <div class="demo-container-right-top" style="height: 430px;padding: 5px 10px 0;margin-bottom: 10px;">
                <div class="demo-container-right-top_left item-bg fl-column" style="width: 49%;padding: 10px;">
                    <div class="demo-container-content_title" style="border-color: #ffd220;"> {{
                        state.chartsTitle.rightTopPieChart }}</div>
                    <div ref="rightTopPieChartRef" class="flexone"></div>
                </div>
                <div class="demo-container-right-top_right item-bg fl-column" style="width: 49%;padding: 10px;">
                    <div class="demo-container-content_title" style="border-color: #ffd220;"> {{
                        state.chartsTitle.rightTopBarChart }}</div>
                    <div ref="rightTopBarChartRef" class="flexone"></div>
                </div>
            </div>

            <div class="demo-container-right-center" style="height: 430px;padding: 5px 10px 0;">
                <div class="demo-container-right-center_left item-bg fl-column" style="width: 33%;padding: 10px;">
                    <div class="demo-container-content_title" style="border-color: #ffd220;"> {{
                        state.chartsTitle.rightCenterLeftPieChart }}</div>
                    <div ref="rightCenterLeftPieChartRef" class="flexone"></div>
                </div>
                <div class="demo-container-right-center_center item-bg fl-column" style="width: 33%;padding: 10px;">
                    <div class="demo-container-content_title" style="border-color: #ffd220;"> {{
                        state.chartsTitle.rightCenterCenterPieChart }}</div>
                    <div ref="rightCenterCenterPieChartRef" class="flexone"></div>
                </div>
                <div class="demo-container-right-center_right item-bg fl-column" style="width: 33%;padding: 10px;">
                    <div class="demo-container-content_title" style="border-color: #ffd220;"> {{
                        state.chartsTitle.rightCenterRightPieChart }}</div>
                    <div ref="rightCenterRightPieChartRef" class="flexone"></div>
                </div>
            </div>
        </div>
    </div>
</template>
        
<script lang="ts" setup>
import { ref, reactive } from 'vue'

const leftPieChartRef = ref()
const leftBarChartRef = ref()
const rightTopPieChartRef = ref()
const rightTopBarChartRef = ref()
const rightCenterLeftPieChartRef = ref()
const rightCenterCenterPieChartRef = ref()
const rightCenterRightPieChartRef = ref()

const state = reactive({
    chartsData: {
        leftPieChart: null as any,
        leftBarChart: null as any,
        rightTopPieChart: null as any,
        rightTopBarChart: null as any,
        rightCenterLeftPieChart: null as any,
        rightCenterCenterPieChart: null as any,
        rightCenterRightPieChart: null as any,
    },
    chartsTitle: {
        leftPieChart: '本周通行员工健康码状态占比统计',
        leftBarChart: '当日各区域进出人数统计',
        rightTopPieChart: '本周通行员工健康码状态占比统计',
        rightTopBarChart: '当日各区域进出人数统计',
        rightCenterLeftPieChart: '本周出入人员占比统计',
        rightCenterCenterPieChart: '当日进出人员体温检测统计',
        rightCenterRightPieChart: '员工特征值提取状态统计'
    }
})

</script> 
        
<style scoped lang="scss">
.demo-container {
    background-image: url('/@/assets/dash/demo1/maxBg2.png') !important;
    background-size: 100% 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 16px 10px 10px;
    display: flex;
    overflow-y: auto;

    .demo-container-left {
        min-width: 330px;
    }

    .demo-container-right {
        flex: 1;
        margin-left: 5px;

        .demo-container-right-top {
            display: flex;
            justify-content: space-between;
        }

        .demo-container-right-center {
            display: flex;
            justify-content: space-between;

        }
    }
}

.demo-container-content {
    border: 2px solid #0DD0F3;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
}

.demo-container-content_title {
    border-left: 4px solid #32ffc7;
    font-size: 14px;
    color: #fff;
    padding-left: 8px;
    height: 18px;
    line-height: 18px;

}

.item-bg {
    background-image: url('/@/assets/dash/demo1/itembg3.png') !important;
    background-repeat: repeat;
    background-clip: padding-box;
    background-color: rgba(0, 0, 0, 0.3);
}

.fl-column {
    display: flex;
    flex-direction: column;
}

.flexone {
    flex: 1 !important;
}

:deep(.pb15) {
    padding: 0px !important;
}
</style>